<template>
  <div class="sidebar">
    <div class="logo-row">
      <img class="logo-img" src="/vite.svg" alt="logo" />
      <span class="logo-text">
        报销管理系统<span class="logo-sub"></span>
      </span>
    </div>
    <ul class="menu-list">
      <!-- 报销申请 -->
      <li class="menu-group" @click="toggle(0)">
        <span class="group-icon">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,9 8,9"/></svg>
        </span>
        <span class="group-title">报销申请</span>
        <span class="arrow" :class="{open: openIndex === 0}">▼</span>
      </li>
      <transition name="fade">
        <ul v-show="openIndex === 0" class="submenu-list">
          <li :class="{active: $route.path.startsWith('/claim/apply')}">
            <router-link to="/claim/apply">新建申请</router-link>
          </li>
          <li :class="{active: $route.path.startsWith('/claim/draft')}">
            <router-link to="/claim/draft">草稿箱</router-link>
          </li>
          <li :class="{active: $route.path.startsWith('/claim/pending')}">
            <router-link to="/claim/pending">待审核</router-link>
          </li>
        </ul>
      </transition>
      <!-- 报销记录 -->
      <li class="menu-group" @click="toggle(1)">
        <span class="group-icon">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11H1l3-3-3-3h8v6z"/><path d="M15 13h8l-3 3 3 3h-8v-6z"/></svg>
        </span>
        <span class="group-title">报销记录</span>
        <span class="arrow" :class="{open: openIndex === 1}">▼</span>
      </li>
      <transition name="fade">
        <ul v-show="openIndex === 1" class="submenu-list">
          <li :class="{active: $route.path.startsWith('/claim/history')}">
            <router-link to="/claim/history">历史记录</router-link>
          </li>
          <li :class="{active: $route.path.startsWith('/claim/approved')}">
            <router-link to="/claim/approved">已通过</router-link>
          </li>
          <li :class="{active: $route.path.startsWith('/claim/rejected')}">
            <router-link to="/claim/rejected">已拒绝</router-link>
          </li>
        </ul>
      </transition>
    </ul>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'
const $route = useRoute()
const openIndex = ref(0)
function toggle(idx) {
  openIndex.value = openIndex.value === idx ? -1 : idx
}
</script>

<style scoped>
.sidebar {
  width: 260px;
  min-width: 260px;
  background: #e74c3c;
  color: #fff;
  height: auto;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  border-right: 2px solid #c0392b;
  flex: 0 0 260px;
}
.logo-row {
  display: flex;
  align-items: center;
  padding: 28px 0 18px 28px;
  border-bottom: 1px solid #c0392b;
  margin-bottom: 18px;
  white-space: nowrap;
  overflow: hidden;
}
.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 18px;
  flex-shrink: 0;
}
.logo-text {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.logo-sub {
  font-size: 16px;
  color: #fadbd8;
  margin-left: 6px;
  font-weight: 400;
}
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-group {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 18px 0;
  padding: 0 0 0 36px;
  height: 48px;
  cursor: pointer;
  user-select: none;
  color: #e6eaf3;
  letter-spacing: 1px;
  border-left: 3px solid transparent;
}
.menu-group:not(:first-child) {
  border-top: 1px solid #c0392b;
  margin-top: 16px;
  padding-top: 16px;
}
.group-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.group-icon svg {
  width: 16px;
  height: 16px;
}
.group-title {
  flex: 1;
}
.arrow {
  margin-left: auto;
  font-size: 13px;
  transition: transform 0.2s;
}
.arrow.open {
  transform: rotate(180deg);
}
.submenu-list {
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 12px 0;
}
.submenu-list li {
  height: 54px;
  display: flex;
  align-items: center;
  font-size: 17px;
  transition: background 0.2s, border-left 0.2s;
  border-left: 0 solid transparent;
  border-radius: 4px;
  padding-left: 56px;
  padding-right: 32px;
  position: relative;
  white-space: nowrap;
  margin-bottom: 6px;
}
.submenu-list li.active,
.submenu-list li.router-link-exact-active {
  background: #c0392b;
  border-left: 0;
  font-weight: bold;
}
.submenu-list li.active::before,
.submenu-list li.router-link-exact-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 30px;
  background: #ff6b6b;
  border-radius: 6px;
}
.submenu-list li:hover {
  background: #c0392b;
}
.submenu-list a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style> 